<template>
  <el-card shadow="never">
    <div slot="header" class="header">
      <h3 class="title">IT资讯</h3>
      <span class="refresh" @click="handleRefresh"
        ><i class="el-icon-refresh"></i
      ></span>
    </div>
    <div class="content-box">
      <el-timeline>
        <el-timeline-item
          :timestamp="item.time"
          v-for="(item, index) in news"
          placement="top"
          :key="index"
        >
          <div class="item-card">
            <a class="item-title" :href="item.weburl" target="_blank">{{
              item.title
            }}</a>
            <p class="item-source">————&nbsp;{{ item.src }}</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
  
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      news: [],
    };
  },
  methods: {
    handleRefresh() {
      this.news = [];
      this.getNews();
    },
    getNews() {
      request.get("/api/news").then((res) => {
        console.log(res);
        this.news = res.data;
        let expire = Date.now() + 24 * 3600;
        localStorage.setItem(
          "news",
          JSON.stringify({
            list: this.news,
            expire: expire,
          })
        );
      });
    },
  },
  created() {
    let newsItem = JSON.parse(localStorage.getItem("news"));
    if (newsItem == null || newsItem.expire < Date.now()) {
      // console.log("getNews");
      this.getNews();
    } else {
      this.news = newsItem.list;
    }
  },
};
</script>

<style scoped>
.content-box {
  padding-left: 2px;
  padding-right: 8px;
  max-height: 500px;
  overflow-y: scroll;
}
.content-box::-webkit-scrollbar {
  width: 5px;
  height: 8px;
}
.content-box::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 4px;
  visibility: hidden;
}
.content-box::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 4px;
}
.content-box:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}
.header {
  display: flex;
  justify-content: space-between;
}
.header .title {
  color: #5fb878;
  display: inline-block;
}

.item-card {
  padding: 5px;
  border-radius: 2px;
  /* box-shadow: 0 0 5px #eee; */
  background-color: #f9f9f9;
}
.item-title:hover {
  color: #5fb878;
  /* text-decoration: underline; */
}
.item-source {
  text-align: right;
  margin-top: 10px;
  color: #5fb878;
  opacity: 0.5;
  font-size: 12px;
}
</style>